<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>论坛1101</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/iconfont.js"></script>
<style>
html,body{ padding:0; margin:0; border:0; width:100%; height:100%;}
body{
	font-family: "宋体";
	font-size: 14px;
	background:url(img/body-bg.png) fixed center no-repeat;
    background-size:cover;
}
.icon {
   vertical-align: -10px;
   fill: currentColor;
   overflow: hidden;
}

.login_body{ width:674px; height:488px; position:absolute; top:50%; margin-top:-244px; left:50%; margin-left:-337px; background:#fff;box-shadow:1px 1px 4px #767676;border-radius:4px; color:#666;}
.login_title{ text-align:center; height:80px; line-height:60px; font-size:22px; font-weight:700;}
.login_block{ width:100%;}
.box_left{ width:442px; float:left; overflow:auto; zoom:1; border-right:1px dashed #eee;}
.box_right{ width:231px;  float:left;}
.box_form{ width:320px; margin:0 auto;}
.box_form input{ width:280px; padding:12px 20px; transition:all,.2s; border:1px solid #dce4e6;border-radius:3px; outline:none; background:#f3f6f8;}
.box_form input:focus{ border-color:#31b968; background:#eef1f3}
.password{ margin:10px 0 0;}
.tab_box{ width:100%;height:20px; font-size:14px; font-weight:700; color:#6B6B6B; margin:0 0 20px;}
.box{background: transparent url(img/checkbox_wev8.gif) no-repeat center top;height: 18px;width: 18px;position: relative;display: inline-block;z-index: 0; cursor: pointer;}
.ked{background-position: center bottom;}
.forget{ text-align:right; color:#3bc372;}
.BBSlogin{ width:100%; text-align:center; padding:10px 0; background:#31b968; color:#fff; font-size:20px; font-weight:500; border-radius:3px; cursor:pointer;}
.BBSlogin a{ color:#fff; text-decoration:none;}
.BBSlogin:hover{ background:#3bc372;}
.box_registered{ width:180px; margin:0 auto; color:#9F9F9F; font-weight:600;}
.box_registeredtop{ margin-top:20px;}
.registered{ font-weight:600; font-size:20px; margin:16px 0; cursor:pointer;}
.registered a{ color:#31b968; text-decoration:none;}
.registered a:hover{ color:#009E4C;}
.way{ width:100%; padding-top:12px;}
.way>div{ width:60px; height:50px; float:left;}
.icon_qq{width:50px; height:50px; color:#357EFF;}
.icon_qq:hover{cursor:pointer; color:#59AFFF;}
.prompt{ width:100%; height:20px; line-height:20px; font-size:13px; color:#e35b5a;}
.prompt span{display:none;}
</style>
</head>
<body>
    <div class="logo_box">
		<div class="login_body">
			<div class="login_title">登录</div>
			<div class="login_block">
            	<div class="box_left">
                	<div class="box_form">
                    	<input type="text" id="userMail" value="" placeholder="手机/邮箱">
                        <div class="prompt"><span>请输入手机/邮箱名称</span></div>
                        <input type="password" id="userPassword" class="password" value="" placeholder="请输入密码">
                        <div class="prompt"><span>请输入密码</span></div>
                        <table class="tab_box">
                        <tr>
                        <td width="18px"><span id="check" class="box"></span></td><td>记住密码</td><td class="forget">忘记密码？</td>
                        </tr>
                        </table>
                        <div class="BBSlogin"><a href="主页.html">登录</a></div>
                    </div>
                </div>
                <div class="box_right">
                	<div class="box_registered">
                    	<div class="box_registeredtop">没有账号？</div>
                        <div class="registered"><a href="注册页.html">立即注册 →</a></div>
                        <div>使用以下账号直接登录</div>
                        <div class="way">
							<div>
                            	<svg class="icon icon_qq" aria-hidden="true">
                                  <use xlink:href="#icon-chuanchengshejiiconzitihua03"></use>
                                </svg>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
	<script>
	$(function(){
		$("#check").on({
			click: function(){
				$(this).hasClass("ked")?$(this).removeClass("ked"):$(this).addClass("ked") ;
			}}) ;
	}) ;
	$(function(){
	$('.BBSlogin').click(function(){
		$.each($('.box_form input'),function(i,n){
			if($.trim($(this).val())==''){
				$(this).css({'border':'1px solid #e35b5a'});
				 $(this).next().find('span').show() ;
				} else{
					$(this).next().find('span').hide() ;
					$(this).css({'border':'1px solid #dce4e6'});
					}
			});
			$.trim($('#insert').val()) ==''? $('span.insert').show() : $('span.insert').hide();
		});
	});	
	</script>    
</body>
</html>
